<template>
  <view class="container">
    <view class="header">
      <text class="title">成就徽章详情</text>
      <text class="subtitle">查看已获得和待解锁的成就徽章</text>
    </view>
    
    <!-- 已获得徽章区域 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">已获得徽章</text>
        <text class="section-count">({{ unlockedBadges.length }}/{{ badges.length }})</text>
      </view>
      
      <view class="badges-grid" v-if="unlockedBadges.length > 0">
        <Card v-for="badge in unlockedBadges" :key="badge.id" class="badge-card">
          <view class="badge-content">
            <view class="badge-icon" :style="{ backgroundColor: badge.color }">
              <uni-icons :type="badge.icon" size="32" color="#fff"></uni-icons>
            </view>
            <view class="badge-info">
              <text class="badge-name">{{ badge.name }}</text>
              <text class="badge-description">{{ badge.description }}</text>
              <text class="badge-date">获得于 {{ badge.date }}</text>
            </view>
          </view>
        </Card>
      </view>
      
      <view class="empty-state" v-else>
        <uni-icons type="help" size="48" color="#CCCCCC"></uni-icons>
        <text class="empty-text">暂无已获得的徽章</text>
      </view>
    </view>
    
    <!-- 待解锁徽章区域 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">待解锁徽章</text>
      </view>
      
      <view class="badges-grid" v-if="lockedBadges.length > 0">
        <Card v-for="badge in lockedBadges" :key="badge.id" class="badge-card locked">
          <view class="badge-content">
            <view class="badge-icon" :style="{ backgroundColor: '#CCCCCC' }">
              <uni-icons :type="badge.icon" size="32" color="#999999"></uni-icons>
            </view>
            <view class="badge-info">
              <text class="badge-name">{{ badge.name }}</text>
              <text class="badge-description">{{ badge.unlockCondition }}</text>
              <text class="badge-progress">进度: {{ badge.progress }}%</text>
            </view>
          </view>
        </Card>
      </view>
      
      <view class="empty-state" v-else>
        <uni-icons type="success" size="48" color="#CCCCCC"></uni-icons>
        <text class="empty-text">已解锁所有徽章</text>
      </view>
    </view>
    
    <!-- 返回按钮 -->
    <view class="back-button">
      <Button type="default" class="action-btn" @click="goBack">
        <uni-icons type="left" size="14" color="#666"></uni-icons>
        <text>返回</text>
      </Button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      badges: [
        {
          id: 1,
          name: '学霸',
          icon: 'book',
          color: '#36CFC9',
          description: '连续7天完成学习计划',
          unlocked: true,
          date: '2025-08-28',
          progress: 100,
          unlockCondition: ''
        },
        {
          id: 2,
          name: '坚持者',
          icon: 'fire',
          color: '#FF7D00',
          description: '连续30天学习打卡',
          unlocked: true,
          date: '2025-08-25',
          progress: 100,
          unlockCondition: ''
        },
        {
          id: 3,
          name: '全能选手',
          icon: 'trophy',
          color: '#FFCC00',
          description: '完成5个不同学科的学习目标',
          unlocked: false,
          date: '',
          progress: 60,
          unlockCondition: '需要完成5个不同学科的学习目标，当前已完成3个'
        },
        {
          id: 4,
          name: '早起鸟',
          icon: 'sunny',
          color: '#FF9500',
          description: '连续7天6点前完成晨读',
          unlocked: false,
          date: '',
          progress: 40,
          unlockCondition: '需要连续7天6点前完成晨读，当前已完成3天'
        },
        {
          id: 5,
          name: '专注达人',
          icon: 'eye',
          color: '#5AC8FA',
          description: '单次学习专注时长超过3小时',
          unlocked: false,
          date: '',
          progress: 80,
          unlockCondition: '需要单次学习专注时长超过3小时，当前最长记录为2小时25分钟'
        }
      ]
    };
  },
  
  computed: {
    unlockedBadges() {
      return this.badges.filter(badge => badge.unlocked);
    },
    lockedBadges() {
      return this.badges.filter(badge => !badge.unlocked);
    }
  },
  
  methods: {
    goBack() {
      uni.navigateBack();
    }
  }
};
</script>

<style lang="scss" scoped>
$spacing-xs: 8px;
$spacing-sm: 12px;
$spacing-base: 16px;
$spacing-lg: 24px;
$spacing-xl: 32px;
$font-size-xs: 12px;
$font-size-sm: 14px;
$font-size-base: 16px;
$font-size-lg: 18px;
$font-size-xl: 20px;
$color-primary: #4CD964;
$color-success: #4CD964;
$color-warning: #FFCC00;
$color-danger: #FF3B30;
$color-gray: #CCCCCC;
$color-light-gray: #F5F5F5;
$color-text-primary: #333333;
$color-text-secondary: #666666;
$color-text-tertiary: #999999;
$border-radius-sm: 8px;
$border-radius-base: 12px;
$border-radius-lg: 16px;
$border-color: #E0E0E0;
$card-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

.container {
  padding: 0;
  background-color: $color-light-gray;
  min-height: 100vh;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  /* 适配刘海屏等异形屏设备的顶部安全区域 */
  padding-top: env(safe-area-inset-top);
}

.header {
  text-align: center;
  padding: $spacing-xl $spacing-base;
  background-color: #FFFFFF;
  border-bottom: 1px solid $border-color;
}

.title {
  font-size: $font-size-xl;
  font-weight: bold;
  color: $color-text-primary;
  display: block;
  margin-bottom: $spacing-xs;
}

.subtitle {
  font-size: $font-size-sm;
  color: $color-text-tertiary;
}

.section {
  margin-bottom: $spacing-lg;
  padding: 0 $spacing-base;
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: $spacing-base;
  padding-top: $spacing-base;
}

.section-title {
  font-size: $font-size-base;
  font-weight: 600;
  color: $color-text-primary;
}

.section-count {
  font-size: $font-size-xs;
  color: $color-text-tertiary;
  margin-left: $spacing-xs;
}

.badges-grid {
  display: flex;
  flex-direction: column;
  gap: $spacing-base;
}

.badge-card {
  padding: $spacing-base;
  background-color: #FFFFFF;
  border-radius: $border-radius-base;
  border: 1px solid $border-color;
  box-shadow: $card-shadow;
  transition: all 0.3s ease;
}

.badge-card.locked {
  opacity: 0.7;
}

.badge-content {
  display: flex;
  align-items: center;
}

.badge-icon {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: $spacing-base;
}

.badge-info {
  flex: 1;
}

.badge-name {
  font-size: $font-size-base;
  font-weight: 500;
  color: $color-text-primary;
  display: block;
  margin-bottom: $spacing-xs;
}

.badge-description {
  font-size: $font-size-sm;
  color: $color-text-secondary;
  display: block;
  margin-bottom: $spacing-xs;
}

.badge-date {
  font-size: $font-size-xs;
  color: $color-text-tertiary;
}

.badge-progress {
  font-size: $font-size-xs;
  color: $color-text-tertiary;
}

.empty-state {
  text-align: center;
  padding: $spacing-xl 0;
}

.empty-text {
  font-size: $font-size-sm;
  color: $color-text-tertiary;
  margin-top: $spacing-base;
}

.back-button {
  padding: $spacing-base;
  background-color: #FFFFFF;
  border-top: 1px solid $border-color;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  /* 适配刘海屏等异形屏设备的底部安全区域 */
  padding-bottom: calc(env(safe-area-inset-bottom) + $spacing-base);
}

.action-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: $spacing-sm $spacing-base;
  border-radius: $border-radius-base;
  font-size: $font-size-base;
  background-color: $color-primary;
  color: #FFFFFF;
}
</style>